<!DOCTYPE html>
<html lang="zh" data-bs-theme="light">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>第一拖拉机股份有限公司 - BS 登录</title> -->
    <title>股份有限公司 - BS 登录</title>
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
    <style>
        .mobile img {
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container mt-2">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="imgs/yto01.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="imgs/yto02.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="imgs/yto03.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <div class="row g-2">
            <div class="col-md-5 col-lg-3 ">
                <div class="login w-100 rounded border mb-2 py-2 px-2">
                    <!-- 在手机尺寸是显示 -->
                    <h1 class="text-success h4 text-center d-md-none">股份有限公司</h1>
                    <h3 class="text-secondary h5 text-center d-md-none">BS 服务管理系统</h3>
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text">账户</span>
                        <input type="text" class="form-control" id="userID">
                    </div>
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text">口令</span>
                        <input type="password" class="form-control" id="password">
                    </div>
                    <div class="input-group input-group-sm mb-3">
                        <span class="input-group-text">厂家</span>
                        <select class="form-select form-select-sm">
                            <option value="" disabled selected>请选择厂家 ...</option>
                            <option value="">大轮拖装配厂</option>
                            <option value="">中小轮拖装配厂</option>
                            <option value="">收获机械</option>
                        </select>
                    </div>
                    <div class="d-flex justify-content-end m-0 p-0">
                        <a href="#" class="btn btn-primary" id="loginBtn">登录</a>
                    </div>
                </div>
                <div class="mobile w-100 rounded border px-2 py-2">
                    <p class="mb-0">专用链接</p>
                    <ul class="nav flex-column ms-3">
                        <li class="nav-item"><a class="nav-link p-0" href="#"><img src="imgs/m01.png"
                                    class="me-3">中国移动</a></li>
                        <li class="nav-item"><a class="nav-link p-0" href="#"><img src="imgs/m02.png"
                                    class="me-3">中国联通</a></li>
                        <li class="nav-item"><a class="nav-link p-0" href="#"><img src="imgs/m03.png"
                                    class="me-3">中国电信</a></li>
                    </ul>
                </div>
                <div class="form-check form-switch mt-2">
                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                    <label class="form-check-label" for="flexSwitchCheckDefault"><i id="colorMode" class="bi bi-moon-stars"></i></label>
                </div>

            </div>
            <div class="col-md-7 col-lg-6 d-flex flex-column">
                <h1 class="text-success h3 text-center d-none d-md-block"> 股份有限公司</h1>
                <h3 class="text-secondary h5 text-center d-none d-md-block">BS 服务管理系统</h3>
                <img src="holder.js/100px600?theme=vine" alt="holder图像">
            </div>
            <div class="col-lg-3 d-none d-lg-block">
                <img src="holder.js/100px200?theme=social" alt="holder图像">
                <input type="color" class="form-control form-control-color" value="#FF0000">
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <img src="holder.js/100px50" alt="">
    </div>
    <footer class="footer mt-2">
        <div class="container ">
            <div>
                <ul class="list-inline text-center bg-dark text-light">
                    <li>
                        许可证号：<a href="http://www.beian.miit.gov.cn">豫ICP备16021053号-1</a> | 豫公网安备 41030502000360号
                    </li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- <script src="js/jquery.min.js"></script> -->
    <script src="./Bootstrap/js/bootstrap.bundle.js"></script>
    <script src="js/holder.js"></script>
    <script>
        // $(function(){
        //     $("#loginBtn").click(function(){
        //         alert("开发中...");
        //     })
        // })
        document.getElementById("loginBtn").addEventListener('click', function () {
            // alert("开发中...");
            window.location.href = "main.html";
        })

        let flexSwitchCheckDefault = document.getElementById("flexSwitchCheckDefault");
        flexSwitchCheckDefault.addEventListener("click",()=>{
            console.log(flexSwitchCheckDefault.checked);
            let html = document.getElementsByTagName("html");
            let colorMode = document.getElementById("colorMode");
            if (flexSwitchCheckDefault.checked){
                html[0].setAttribute("data-bs-theme","dark");
                colorMode.classList.remove("bi-moon-stars");
                colorMode.classList.add("bi","bi-sun");
            }else{
                html[0].setAttribute("data-bs-theme","light");
                colorMode.classList.remove("bi-sun");
                colorMode.classList.add("bi","bi-moon-stars");
            }
        })
    </script>
</body>

</html>